<template>
  <div class="growth_rate">
    <div id="container" class="container">
    </div>
  </div>
</template>

<script>
import axios from '@/utils/axios'
export default {
  name:'growthRate',
  data() {
    return {
      path: null
    }
  },
  watch: {
    path:function() {
      // console.log(oldVal);
      // console.log(val);
      this.getMap()
    }
  },
  created() {
    this.getData()
  },
  mounted(){
  },
  methods: {
    getData() {
      axios.get('/growth/findAllGrowth').then((res)=>{
        this.path = res.data.data
        console.log(this.path);
      })
    },
    getMap() {
      var map = new AMap.Map('container', {
        mapStyle: 'amap://styles/grey',
        zoom: 5,
        pitch: 0,
        center: [104.090834, 31.270677],
        features: ['bg', 'road', 'road', 'building'],
        viewMode: '3D'
      });

      AMap.plugin([
          'AMap.ToolBar',
          'AMap.Scale',
          'AMap.MapType',
      ], function(){
          // 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
          map.addControl(new AMap.ToolBar());

          // 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺
          map.addControl(new AMap.Scale());
        
          // 在图面添加类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
          map.addControl(new AMap.MapType());
      });
      
      var layer = new Loca.LabelsLayer({
          fitView: true,
          map: map,
          collision: true
      });

      $.get(this.path, function (datas) {
          layer.setData(datas, {
              type: 'csv',
              lnglat: function (o) {
                  return dist[o.value['地区']]
              },
              lnglat: 'lnglat'
          }).setOptions({
              style: {
                  direction: 'center',
                  offset: [0, 0],
                  text: function (data) {
                      return data.value['city'] + ' ' + data.value['mom'];
                  },
                  fillColor: function (data) {
                      var income = +data.value['mom'].slice(0, -1);
                      return income < -5 ? '#0C6DB0' :
                          income < -4 ? '#99d594' :
                              income < -3 ? '#99d594' :
                                  income < -2 ? '#fee08b' :
                                      income < -1 ? '#fee08b' : '#fc8d59';
                  },
                  fontSize: function (data) {
                      var income = +data.value['mom'].slice(0, -1);
                      return income < -5 ? 12 :
                          income < -4 ? 12 :
                              income < -3 ? 16 :
                                  income < -2 ? 18 :
                                      income < -1 ? 26 : 30;
                  },
                  strokeWidth: 0
              }
          }).render();
          
          layer.setzIndex(100);
      });
    }
  }
}
</script>

<style scoped>
  #container {
    width: 1326px;
    height: 670px;
    /* background-color: #2C343C; */
  }
</style>
